<template>
	<div class="funds">
		<el-card class="box-card">
			<el-button slot="header" type="primary">
				<span>临近终止日</span>
			</el-button>
			<div>
				<el-table :data="tableData3" style="width: 100%" border :header-cell-style="{ background: '#FAFAFA' }">
					<el-table-column label="产品简称" prop="fundName">
						<template slot-scope="scope">
							<el-popover trigger="hover" placement="top" width="300">
								<span>{{ scope.row.fundName }}</span>
								<div slot="reference" class="ellipsis">
									<span v-if="scope.row.fundName != null && scope.row.fundName.length > 6">{{ scope.row.fundName.replace('景顺长城', '').substr(0, 6) + '.' }}</span>
									<span v-else>{{ scope.row.fundName }}</span>
								</div>
							</el-popover>
						</template>
					</el-table-column>
					<el-table-column label="终止日" prop="contractEndDate">
						<template slot-scope="scope">
							{{ scope.row.contractEndDate | timerConversionStr }}
						</template>
					</el-table-column>
					<el-table-column label="责任人" prop="personLiableName"> </el-table-column>
					<el-table-column label="复核人" prop="checkLiableName"> </el-table-column>
					<el-table-column label="倒计时" :formatter="formatterDays" prop="contractEndDate"> </el-table-column>
				</el-table>
			</div>
		</el-card>
	</div>
</template>
<script>
import { dateType } from '@/api/productApi/home'
import { dateFormatter, getDateDayAfter } from '@/utils/timer'
export default {
	props: {
		commonPersonList: {
			type: Array,
			default: Array
		}
	},
	data() {
		return {
			tableData3: []
		}
	},

	mounted() {
		this.getOpeningPeriodList('contractEnd')
	},

	methods: {
		getOpeningPeriodList(type) {
			const params = {}
			params.type = type
			params.startTime = dateFormatter('yyyyMMdd', new Date())
			params.endTime = dateFormatter('yyyyMMdd', getDateDayAfter(30))
			dateType(params).then(res => {
				if (res.msgCode === 'Y') {
					res.data.body.forEach(item => {
						if (item.baseInfo) {
							item.fundName = item.baseInfo.fundName
						}
						if (item.dateInfo) {
							item.contractEndDate = item.dateInfo.contractEndDate
							item.operateEndDate = item.dateInfo.operateEndDate
						}
						if (item.checkLiableId) {
							this.commonPersonList.forEach(items => {
								if (item.checkLiableId === items.username) {
									item.checkLiableName = items.ChineName ? items.ChineName : ''
								}
							})
						}
						if (item.personLiableId) {
							this.commonPersonList.forEach(items => {
								if (item.personLiableId === items.username) {
									item.personLiableName = items.ChineName ? items.ChineName : ''
								}
							})
						}
					})
					this.tableData3 = res.data.body
				}
			})
		},

		formatterDays: function(row, column, cellValue, index) {
			const day1 = new Date(cellValue.substring(0, 4) + '-' + cellValue.substring(4, 6) + '-' + cellValue.substring(6, 8))
			const taday = new Date(dateFormatter('yyyy-MM-dd', new Date()))
			const days = parseInt((day1 - taday) / (1000 * 60 * 60 * 24))
			if (days >= 0) {
				return '剩余' + days + '天'
			} else if (days < 0) {
				return '超时' + -days + '天'
			}
		}
	}
}
</script>
<style scoped  lang='scss' >
.funds {
	padding: 1% 0% 0% 1%;
	width: 28%;
	height: 550px;
	display: flex;
	flex-wrap: wrap;
	flex-direction: column;
	justify-content: space-between;
	::v-deep .el-card__body {
		padding: 10px;
		height: 500px;
		overflow: auto;
	}
	::v-deep .cell {
		font-size: 12px;
		padding: 0;
		text-align: center;
	}
}
.el-card {
	width: 100%;
	height: 550px;
	border-radius: 0;
}
::v-deep .el-card__header {
	padding: 0 0px 0 0px;
	color: white;
	button {
		height: 31px;
		display: flex;
		align-items: center;
		width: 100%;
		border: none;
		border-radius: 0;
		outline: none;
		background-color: #3d78cc !important;
		span {
			width: 100%;
			display: flex;
			justify-content: space-between;
			align-items: center;
			span {
				width: 50%;
			}
			span:nth-child(2) {
				display: block;
				text-align: right;
			}
		}
	}
}
.clearfix:after {
	display: none;
}
</style>
